<template>
  <page class="change">
    <page-header>
      <x-header :left-options="{backText: ''}">更改绑定手机</x-header>
    </page-header>

    <page-content :scroll="false">

      <div class="nowphone">
        <div class="nowphone-c">
          <p>当前绑定手机号:</p>
          <p>{{userInfo.mobile}}</p>
        </div>
      </div>

      <mt-field label="+86" placeholder="新手机号码" type="tel" v-model="mobile">
        <div class="code">
          <button class="code" @click="getcode()" :disabled="show">
            <span>获取验证码</span>
            <span v-show="show" class="count">{{count}} s</span>
          </button>
        </div>
      </mt-field>

      <mt-field label="验证码" v-model="code" placeholder="请填写收到的验证码">
      </mt-field>
    </page-content>
    <page-footer>
      <mt-button type="primary" size='large' class='prese' @click='prese()'>保存</mt-button>
    </page-footer>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'mint-ui'
import { XHeader } from 'vux'
import { com, user } from '@service'
import validate from '@utils/validate'

export default {
  name: 'Change',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  data () {
    return {
      mobile: '',
      code: '',
      show: false,
      count: 60
    }
  },
  methods: {
    async prese () {
      if (!validate.isTel(this.mobile)) {
        MessageBox.alert('请输入手机号')
        return
      }
      if (this.mobile === this.userInfo.mobile) {
        MessageBox.alert('绑定号码不能与当前绑定号码一致')
        return
      }
      if (!this.code) {
        MessageBox.alert('请输入验证码')
        return
      }
      let userId = this.userId
      let token = this.token
      let resetType = 1
      let mobile = this.mobile
      let code = this.code

      await com.reset({ userId, token, resetType, mobile, code })
      let data = await user.info({ userId, token })
      this.info = data
      this.$store.dispatch('user/info', data)
    },
    async getcode () {
      let secret = 'PysmsSecret20170723'
      let sendType = 3
      let mobile = this.mobile

      if (!validate.isTel(this.mobile)) {
        MessageBox.alert('请输入手机号')
        return
      }
      if (this.mobile === this.userInfo.mobile) {
        MessageBox.alert('绑定号码不能与当前绑定号码一致')
        return
      }

      if (!this.timer && mobile) {
        try {
          await com.smsAuthCode({ mobile, secret, sendType })
          // countdown
          this.show = true
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= this.count) {
              this.count--
            } else {
              this.count = 60
              clearInterval(this.timer)
              this.timer = null
              this.show = false
            }
          }, 1000)
        } catch (error) {
          console.log(error)
          MessageBox.alert(error.info || error.message)
        }
      }
    },
    reset () {
      this.mobile = ''
      this.code = ''
      this.show = false
      this.count = 60
    }
  },
  beforeRouteLeave (to, from, next) {
    this.reset()
    next()
  }
}
</script>

<style lang="scss" scoped>
.change {
  height: 100%;
  width: 100%;
  .nowphone {
    width: 100%;
    height: 6rem;
    background: #1e82d2;
  }
  .nowphone-c {
    padding: 0 1.6rem;
  }
  .nowphone-c p:nth-of-type(1) {
    color: #c7dcf7;
    line-height: 2rem;
    font-size: 0.9rem;
  }
  .nowphone-c p:nth-of-type(2) {
    color: #fff;
    line-height: 3rem;
    font-size: 1.2rem;
  }
  .prese {
    position: absolute;
    bottom: 0;
    background: #1e82d2;
  }
  .code {
    width: 7rem;
    height: 2rem;
    background: #8bc34a;
    color: #fff;
    border-style: none;
    border-radius: 5px;
    font-size: 12px;
  }
  .head {
    width: 100%;
    background: #1e82d2;
    font-size: 1.125rem;
    height: 3rem;
  }
}
</style>
